<template>
	<view class="row-me row-center margin-left30 margin-right30 broadcast">
		<image src="https://cdn7.axureshop.com/demo/1996612/images/%E9%A6%96%E9%A1%B5/u730.svg" mode=""
			class="margin-left30 margin-right20 horn"></image>
		<swiper circular="true" vertical="true" autoplay="true" interval="3000" duration="1000"
			class="margin-right30 swiperBox">
			<swiper-item v-for="(item,index) in noticeList" :key="index" class="row-me row-center swiperItem">
				<span style="margin-top: 10rpx;">{{item.time}}</span>
				<!-- {{item.time}} -->
			</swiper-item>
		</swiper>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	let noticeList = ref([ //公告栏播报
					{
						time: '明日早上8:00-15:00，因水箱消毒，此期间停水',
					},
					{
						time: '下半年物业费开始缴纳，请到物业服务处缴纳',
					},
					{
						time: '今晚大风，请各位住户及时收取屋外晾晒衣物',
					},
				])

</script>
<style lang="scss" scoped>
	image {
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.broadcast {
		// width: 100%;
		margin-top: 20rpx !important;
		display: flex;
		flex-direction: row;
		height: 80rpx;
		line-height: 80rpx;
		background: #FFFFFF;
		margin: 0 20rpx;

		.horn {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
		}

		.swiperBox {
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin-top: 20rpx;
			.horn {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
			}

			.swiperItem {
				font-family: 'ArialMT', 'Arial', sans-serif;
				font-weight: 400;
				font-style: normal;
				font-size: 26rpx;
				letter-spacing: normal;
				color: #333333;
				vertical-align: none;
				text-align: center;
				line-height: normal;
				width: 100rpx;

				span {
					width: 100%;
					margin-top: 20rpx;
				}
			}

		}
	}
</style>